<template>
    <div class="container-fluid">
      <div class="row">
      </div>


      <div class="row grzx_1 justify-content-center">
        <ul class="grzx">
          <!-- <li style="margin-left: 200px;"><router-link to="/user">我的资料</router-link></li> -->
          <li v-for="(list,index) in list" :key="index">
          <button class="button" @click="point(index)">{{list.name}}</button>
          </li>
      </ul>
      <div>
        <component :is="comnext"></component>
      </div>
      </div>
      <!-- <router-view /> -->
    </div>
</template>

<script>
import file from '../views/user/File.vue'
import list from '../views/user/List.vue'
import profile from '../views/user/Profile.vue'
import shopcart from '../views/ShopcartView.vue'
export default{
    name:'user',
    components:{
      file,shopcart,list,profile
    },
    data(){
        return{
          comnext:'shopcart',
          list:[
            {name:'我的资料'},
            {name:'购物车'},
            {name:'我的订单'},
            {name:'我的收藏'}
          ]
    }
},
 methods: {
  point(index){
    if(index===0){
      this.comnext='profile'
    }else if(index===1){
      this.comnext='shopcart'
    }else if(index===2){
      this.comnext='file'
    }else{
      this.comnext='list'
    }
  }
 },
}
</script>


<style lang="scss" scoped>
*{
  margin: 0;
  padding: 0;
}
.grzx_1{
  width: 76%;
  height: 60px;
  background: #FF7BAC;
  margin: 0 auto;
}
ul li{
  float: left;
  width: 140px;
  height: 60px;
  line-height: 60px;
  list-style: none;
  margin-left: 120px;
  a{
    color: white;
    font-size: 20px;
  }
}
.button{
  background-color:#FF7BAC ;
  font-size: 20px;
  width: 200px;
  border: none;
  color: white;
}
.button:active{
  background: red;
}
</style>
